<template>
	<scroll-view :scroll-y="true" :style="{
            height: 'calc(100vh)',
        }" class="page">
		<view class="navbar">
      <!-- #ifdef MP-WEIXIN -->
      <navbar title="订单结算" bgColor="#01cc00" fontColor="#fff"> </navbar>
      <!-- #endif -->
      <!-- #ifdef MP-ALIPAY -->
      <navbar title="订单结算" bgColor="#328cfd" fontColor="#fff"> </navbar>
      <!-- #endif -->
		</view>
		<view class="table-no" v-if="table_no && table_no.length>0">
			桌台：<view class="no">{{ table_no }}</view>
		</view>
		<view class="body">
			<view class="row total">
				<view class="left">账单总计</view>
				<view class="right">￥{{total}}</view>
			</view>
			<view class="row discount">
				<view class="left">已优惠</view>
				<view class="right">-￥{{discount_money}}</view>
			</view>
			<view class="row pay" style="color: red">
				<view class="left">还需支付</view>
				<view class="right">￥{{payment_amt}}</view>
			</view>
		</view>
		<u-radio-group v-model="payment" placement="column">
			<view class="payment chuzhika-pay" @click="selectPayment('chuzhika')" v-if="open_cart">
				<view class="icon">
					<u-icon name="https://vivipos.oss-cn-shanghai.aliyuncs.com/miniprogram/vip_card.png" size="66"
						imgMode="scaleToFill"></u-icon>
				</view>
				<view class="title">
					<view class="one u-col-3">储值卡</view>
					<view class="two u-col-6">余额：￥{{curr_money}}</view>
					<view class="three u-col-3"><a href="#">去充值</a></view>
				</view>
				<view class="radio">
					<u-radio name="chuzhika" activeColor="#f9ae3d" size="50" labelSize="40" iconSize="32">
					</u-radio>
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN || H5 -->
			<view class="payment weixin-pay" @click="selectPayment('weixin')">
				<view class="icon">
					<u-icon name="weixin-circle-fill" color="#09bb07" size="66"></u-icon>
				</view>
				<view class="title">微信支付</view>
				<view class="radio">
					<u-radio name="weixin" activeColor="#f9ae3d" size="50" labelSize="40" iconSize="32">
					</u-radio>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY || H5 -->
			<view class="payment zhifubao-pay" @click="selectPayment('zhifubao')">
				<view class="icon">
					<u-icon name="zhifubao-circle-fill" color="#226bf4" size="66"></u-icon>
				</view>
				<view class="title">支付宝</view>
				<view class="radio">
					<u-radio name="zhifubao" activeColor="#f9ae3d" size="50" labelSize="40" iconSize="32">
					</u-radio>
				</view>
			</view>
			<!-- #endif -->
		</u-radio-group>
		<view class="empty-box"></view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="submit">
			<sqb-pay @navigateTo="navigateTo" :return_url="payData.return_url" :notify_url="payData.notify_url"
				:total_amount="payData.total_amount" :terminal_sn="payData.terminal_sn" :client_sn="payData.client_sn"
				:subject="payData.subject" :merchant_name="payData.merchant_name" :sign="pay_sign"
				:reflect="payData.reflect">
				<u-button text="支付（请确认桌台是否正确）" color="#01cc00" size="large"
					v-if="table_no && table_no.length>0"></u-button>
				<u-button v-else text="支付" color="#01cc00" size="large"></u-button>
			</sqb-pay>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY -->
		<view class="submit alipay-btn" @click="AliPay">
			<u-button text="支付（请确认桌台是否正确）" color="#328cfd" size="large" v-if="table_no && table_no.length>0"></u-button>
			<u-button v-else text="支付" color="#328cfd" size="large"></u-button>
		</view>
		<!-- #endif -->
	</scroll-view>
</template>
<script>
	import {
		mapState
	} from "vuex"; //引入mapState
	import utils from "../../utils/common";
	import PageApi from "@/api/page"

	export default {
		data() {
			return {
				payData: {
					notify_url: "",
					return_url: "",
					total_amount: 0,
					terminal_sn: "",
					client_sn: 0,
					subject: "",
				},
				pay_sign: "",
				curr_money: 0, // 储值卡余额
				discount_money: 0, // 优惠金额
				open_cart: false, // 是否开启储值卡
				payment_amt: 0, // 支付金额
				total: 0, //总价
				payment: 'weixin'
			};
		},
		computed: {
			...mapState({
				table_no: (state) => state.order.table_no,
				// has_table_no: (state) => state.ordering.has_table_no,
				order_info: (state) => state.cart.order_info
			})
		},
		mounted() {
			//#ifdef MP-ALIPAY
			this.payment = "zhifubao"
			//#endif

			//#ifdef MP-WEIXIN
			this.payment = "weixin"
			//#endif
			// 订单详情
			PageApi.orderPayment({
				order_id: this.order_info.order_id, // 订单id
				sale_time: this.order_info.sale_time // 开单时间
			}).then(res => {
				if (res.code == 200) {
					this.curr_money = res.data.curr_money // 储值卡余额
					this.discount_money = res.data.discount_money // 优惠金额
					this.open_cart = res.data.open_cart // 是否开启储值卡
					this.payment_amt = res.data.payment_amt // 支付金额
					this.total = res.data.total //总价
				}
			})
			//#ifdef MP-WEIXIN
			// 订单收钱吧配置参数
			PageApi.paymentPay({
				order_id: this.order_info.order_id, // 订单id
				sale_time: this.order_info.sale_time // 开单时间
			}).then(res => {
				if (res.code == 200) {
					this.payData.client_sn = res.data.client_sn
					this.payData.notify_url = res.data.notify_url;
					this.payData.return_url = res.data.return_url;
					this.payData.total_amount = res.data.total_amount;
					// this.payData.total_amount = 0.01;
					this.payData.terminal_sn = res.data.terminal_sn;
					this.payData.subject = res.data.subject;
					this.payData.reflect = res.data.reflect;
					this.pay_sign = res.data.sign;
					this.$store.commit('cart/setClientSn', res.data.client_sn)
				}
			})
			//#endif

		},
		methods: {
			navigateTo(e) {
				console.log('----收钱吧回调----')
				console.log(e)
				uni.reLaunch({
					url: e.detail.url,
					fail(e) {
						uni.showToast({
							title: "支付失败",
						});
					},
				});
			},
			selectPayment(id) {
				if (id != this.payment) {
					this.$store.commit("ordering/set", {
						payment: id,
					});
				}
			},

			AliPay() {
				// 调用接口生成支付订单
				PageApi.aliPaymentPay({
					order_id: this.order_info.order_id, // 订单id
					sale_time: this.order_info.sale_time // 开单时间
				}).then(res => {
					if (res.code == 200) {
						this.$store.commit('cart/setClientSn', res.data.client_sn)
						// 发起支付
						my.tradePay({
							// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
							tradeNO: res.data.trade_no,
							success: (res) => {
								// my.alert({
								// 	content: JSON.stringify(res),
								// });
								console.log('----支付成功回调----')
								console.log(res)
								uni.reLaunch({
									url: "/pages/ordering/finish",
									fail(e) {
										uni.showToast({
											title: "支付成功",
										});
									},
								});
							},
							fail: (res) => {
								my.alert({
									content: JSON.stringify(res),
								});
							}
						});
					}
				})

			}
		},
		onShow() {
			if (this.$store.state.totalPrice == 0) {
				uni.navigateTo({
					url: "/pages/index/index"
				});
			}

			//
		},
	};
</script>
<style lang="scss">
	.empty-box {
		height: 130rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.submit {
		position: fixed;
		width: 100%;
		bottom: 0;
		height: 100rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #01cc00;
	}

	.alipay-btn {
		background-color: #328cfd;
	}

	.page {
		background-color: #f2f2f2;
	}

	.table-no {
		width: 100%;
		height: 140rpx;
		font-size: 34rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.no {
			color: red;
			font-size: 46rpx;
		}
	}

	.body {
		.row {
			background-color: #fff;
			padding: 30rpx 50rpx;
			font-size: 34rpx;
			display: flex;
			justify-content: space-around;

			.left {
				width: 50%;
			}

			.right {
				width: 50%;
				text-align: right;
			}
		}
	}

	.payment {
		margin-top: 10rpx;
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 34rpx;

		.icon {
			width: 15%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.title {
			width: 75%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			.two {
				font-size: 28rpx;
				color: #9d9d9d;
			}

			.three {
				font-size: 30rpx;
				color: blue;
				text-align: right;
				margin-left: -30rpx;
			}
		}

		.radio {
			width: 10%;
		}
	}
</style>
